<template>
  <div :class="['goodsDetail',{scrollForbidden:showModal==true}]">
    <!-- 头部 -->
    <swiper1 :imgList="imgList"></swiper1>
    <div class="name_wrapper">
      <div class="name">
        {{goodsDetail.name}}
      </div>
      <div class="price">
        <div class="left">
          <span>￥{{goodsDetail.s_price}}</span>
          <span>￥{{goodsDetail.m_price}}</span>
        </div>
        <div class="right">
          <span>月售：{{goodsDetail.sale_count}}</span>
        </div>

        <!-- <span>原价￥{{goodsDetail.m_price}}</span> -->
      </div>
    </div>
    <!-- 头部结束 -->

    <div class="service">
      <div class="service-item">
        <img src="../../../static/images/goodsDetails/gou.png"/>
        <span>门店自提</span>
      </div>
    </div>

    <!-- 规格等详情 -->
    <div class="goods_desc">
      <div>
        <!--        <div class="goods_desc_item sell_num" v-if="!credit">-->
        <!--          <span>选择</span>-->
        <!--          &lt;!&ndash; <div>广东省 广州市</div> &ndash;&gt;-->
        <!--        </div>-->
        <!--        <div class="goods_desc_item serve" v-if="!credit">-->
        <!--          <span>邮费</span>-->
        <!--          <span>{{goodsDetail.express_fee}}</span>-->
        <!--        </div>-->
        <div class="goods_desc_item choice" @click="showCart">
          <span>选择</span>
          <span>规格</span>
          <span class="list_item_arrow">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">
          </span>
        </div>
        <!--        <div class="goods_desc_item desc" @click="toGoodsIntroduce(0)" v-if="!credit">-->
        <!--          <span>详情</span>-->
        <!--          <span>详情介绍</span>-->
        <!--          <span class="list_item_arrow">-->
        <!--            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">-->
        <!--          </span>-->
        <!--        </div>-->
        <!--        <div class="goods_desc_item" @click="toGoodsIntroduce(1)" v-if="!credit">-->
        <!--          <span>评论</span>-->
        <!--          <span class="list_item_arrow">-->
        <!--            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">-->
        <!--          </span>-->
        <!--        </div>-->
        <!-- 规格等详情结束 -->

        <!-- 评论列 -->
        <!--        <div class="comment" v-if="!credit">-->
        <!--          <div class="comment_item" v-for="(value,index) in commentList.data" v-show="index<5" :key="index">-->
        <!--            <div class="comment_item_top">-->
        <!--              <div class="comment_item_nick">{{value.user_info.nickname}}</div>-->
        <!--              <div class="comment_item_time">{{value.created_at}}</div>-->
        <!--            </div>-->
        <!--            <div class="comment_item_content">{{value.content}}</div>-->
        <!--            <div class="comment_item_pic">-->
        <!--              <img :src="value1" mode="aspectFill" v-for="(value1,index1) in value.comment_img" @click="previewImage(value1,value.comment_img)" :key="index1">-->
        <!--            </div>-->
        <!--          </div>-->

        <!--          <div class="comment_btn">-->
        <!--            <div class="comment_btn_all" @click="toGoodsIntroduce(1,true)">所有评价({{commentList.total_comment_num}})</div>-->
        <!--            <div class="comment_btn_pic" @click="toGoodsIntroduce(1,false)">有图评价({{commentList.have_img_comment_num}})</div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!-- 评论列结束 -->
      </div>

      <!-- 商品介绍 -->
      <div class="goods_introduce">
        <div>商品详情</div>
        <div class="content">
          <div v-html="goodsDetail.detail"></div>
        </div>
        <!-- <div>海外品暂不支持7天无理由退换，介意请慎拍，谢谢！</div> -->
        <!--          <img :src="value" alt="" v-for="(value,index) in goodsDetail.detailed_description" @click="previewImage(value, goodsDetail.detailed_description)" :key="index" mode="widthFix">-->
      </div>
      <!-- 商品介绍结束 -->

      <!-- 底部购物栏 -->
      <div class="cartBar">
        <div class="cartBar_left" v-if="!credit">
          <div class="cartBar_left_item">
            <img src="../../../static/images/goodsDetails/kefu.png" alt="">
            <div>
              <button open-type="contact">客服</button>
            </div>
          </div>
          <!--             <div class="cartBar_left_item">
                        <img src="../../../static/images/goodsDetails/collect.png" alt="">
                        <! <img src="../../../static/images/goodsDetails/collect_active.png" alt=""> -->
          <!-- <div>收藏</div>
        </div> -->
          <div class="cartBar_left_item cartIcon_wrapper" @click="toCart">
            <img src="../../../static/images/goodsDetails/caret.png" alt="">
            <div>购物车</div>
            <div class="cartIcon" v-show="cartListNum!='0' &&cartListNum">{{cartListNum}}</div>
          </div>
        </div>
        <div class="cartBar_right" v-if="!credit">
          <div @click="showCart">加入购物车</div>
          <div @click="buy">立即购买</div>
        </div>
        <div class="cartBar_right" v-if="credit">
          <div @click="buy">立即兑换</div>
        </div>
      </div>
      <!-- 底部购物栏结束 -->

      <!-- 弹出层 -->
      <div class="mask" v-if="showModal" @click="hideCart"></div>
      <div class="modalDlg" v-if="showModal">
        <div class="modalDlg_top">
          <img :src="goodsDetail.thumb_url" alt="">
          <div class="modalDlg_top_right">
            <div class="modalDlg_top_right_name">
              <!-- <span class="modalDlg_top_right_name_tag">海外购</span> -->
              <span>{{goodsDetail.name}}</span>
            </div>
            <div class="cart_price">
              <span v-if="credit">{{goodsDetail.exchange_integral}}积分</span>
              <span v-else>￥{{goodsDetail.s_price}}</span>
              <span>库存：{{goodsDetail.stock}}</span>
            </div>
          </div>
        </div>
        <div class="modalDlo_center">
          <div class="modalDlo_center_tit" v-if="goodsDetail.goods_spu_info.length!=0">规格</div>
          <div class="modalDlo_center_classify">
            <div
              v-for="(item,index) of goodsDetail.goods_spu_info"
              :key="index" @click="select_classify(item,index)"
              :class="{selectClassify:index==classifyIndex}"
            >
              {{item.spu_name}}
            </div>
          </div>
        </div>
        <div class="modalDlo_bottom">
          <count @numberChange="numberChange" :stock="goodsDetail.stock">
            <div>购买数量</div>
          </count>
        </div>
        <div class="join_cart" v-if="!buyNow" @click="addCart">加入购物车</div>
        <div class="join_cart" v-else @click="buying">立即购买</div>
      </div>
      <!-- 弹出层结束 -->

      <!--浮动窗口-->
      <div class="share-btn" v-if="!shareShow" @click="shareClick">
        <img src="../../../static/images/goodsDetails/icon_share.png" />
        <div class="share-text">分享</div>
      </div>
      <div class="share-mode" v-if="shareShow" @click.stop="shareClick">
        <div class="share-bottom" @click.stop v-if="!shareBtn">
          <div class="share-title">分享</div>
          <div class="share-list">
            <button class="share-item" open-type="share">
              <div class="item-img">
                <img src="../../../static/images/goodsDetails/icon_wechat.png" />
              </div>
              <div class="item-name">好友</div>
            </button>
            <div class="share-item" @click="showQrcode">
              <div class="item-img">
                <img src="../../../static/images/goodsDetails/icon_poster.png" />
              </div>
              <div class="item-name">海报</div>
            </div>
          </div>
        </div>
        <div class="qrCode_wrapper">
          <img v-if="shareBtn" @load="imgLoaded" @error="imgError" mode="widthFix" :src="qrCodeUrl" alt="" @click.stop="previewImages(qrCodeUrl)">
          <button class="assemble_msg_btn wx_btn button"  v-if="shareBtn && imgHasLoaded" @tap.prevent.stop="saveImage()">保存海报</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import swiper1 from '@/components/swiper'
  import count from '@/components/count'
  import {setTimeout} from 'timers';

  export default {
    name: 'goodsDetail',
    components: {
      swiper1,
      count
    },
    data() {
      return {
        id: '',//商品id
        goodsDetail: '',//商品信息
        showModal: false,//显示弹出层
        buyNow: false,//显示加入购物车还是立即购买按钮
        num: 1,//购买商品数量
        cartListNum: '',//购物车数量
        commentList: "",   //评论内容
        imgList: '',
        credit: '',//credit为来自积分商城的跳转
        classifyIndex: -1,//规格索引
        classifyId: '',//规格id
        shareShow: false,
        shareBtn: false,
        qrCodeUrl: '',
        imgHasLoaded: false,
      }
    },
    onLoad(options) {
      this.credit = options.from;
      this.id = options.id;
      wx.setStorageSync('toPage', `/pages/goodsDetail/main?id=${this.id}`)
      // this.getComment()
    },
    watch: {
      goodsDetail(nval) {
        if (nval.goods_banner.length != 0) {
          this.imgList = nval.goods_banner
        } else {
          this.imgList = [nval.thumb_url]
        }
      }
    },
    methods: {
      showQrcode(){
        if(!this.imgHasLoaded){
          wx.showLoading({title:'生成海报中'})
        }
        this.shareBtn=true;
      },
      saveImage() {
        // #ifndef H5
        wx.saveImageToPhotosAlbum({
          filePath: this.qrCodeUrl,
          success(res) {
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            })
          }
        })
        // #endif
        // #ifdef H5
        wx.showToast({
          title: '保存了',
          icon: 'none'
        });
        // #endif
      },
      imgLoaded(){
        this.imgHasLoaded=true
        wx.hideLoading()
      },
      imgError(){
        wx.hideLoading()
      },
      previewImages(src) {
        console.log(src)
        var current = src;
        wx.previewImage({
          current: current,
          urls: [current]
        })
      },
      getQrCodeUrl(){
        //获取分享海报

        const userToken=wx.getStorageSync('userToken');
        const goods_id=this.id;
        this.qrCodeUrl=`https://bld.rzkeji.com/api/goods/generateShareQrCode?user_token=${userToken}&goods_id=${goods_id}`
      },
      shareClick(){
        if (this.shareShow){
          this.shareShow = false;
        } else {
          this.shareShow = true;
        }
        this.shareBtn = false;
      },
      previewImage(value, value1) {
        this.$currency.previewImage(value, value1)
      },
      showCart() { //显示加入购物车
        this.num = 1;//清除规格数量
        this.showModal = true
        this.buyNow = false
      },
      buy() {//显示立即购买
        this.num = 1;//清除规格数量
        this.showModal = true
        this.buyNow = true
      },
      async buying() {   //点击弹窗的立即购买
        if (this.num <= 0) {
          this.$currency.showToast('购买数量不能为0');
          return
        } else if (this.classifyId == '' && this.credit != 'credit') {
          this.$currency.showToast('先选择规格吧');
          return
        }
        let res = await this.$request.postData('/order/buildOrder', {
          type: 'goods',
          goods_id: this.id,
          num: this.num,
          goods_spu_id: this.classifyId,
          user_token: wx.getStorageSync('userToken'),
          shop_id: wx.getStorageSync('shop_id')
        })
        if (res.data.level == 'success') {
          this.$store.dispatch('setOrder', res.data.data)
          // this.weChatPayment(res.data.data.order_num);
          if (this.credit == 'credit') {
            this.$currency.navigateTo(`/pages/orderConfirm/main?from=credit&order_num=${res.data.data.order_num}`)
          } else {
            this.$currency.navigateTo(`/pages/orderConfirm/main?order_num=${res.data.data.order_num}`)
          }

        } else {
          this.$currency.showToast(res.data.message)
        }

      },
      async weChatPayment(id) {
        let params = {
          user_token: wx.getStorageSync('userToken'),
          order_num: id
        }
        const res = await this.$request.postData('/payment/weChatPayment', params)
        if (res.data.level == 'success') {
          let data = res.data.data;
          wx.requestPayment({
            timeStamp: data.timeStamp,
            nonceStr: data.nonceStr,
            package: data.package,
            signType: data.signType,
            paySign: data.paySign,
            success(res) {
              // console.log('success');
              // this.$currency.showToast('支付成功！')
              // setTimeout(function () {
              //     uni.navigateBack({
              //         delta: 1
              //     })
              // },1500)
              wx.switchTab({
                url: '/pages/me/main'
              })
            },
            fail(res) {
              console.log(res)
            }
          })
        } else {
          uni.showToast({
            icon: 'none',
            title: res.data.message
          })
        }
      },
      hideCart() {
        this.showModal = false
      },
      async getGoodsDetails(id) {
        let res = await this.$request.getData('/goods/getGoodsDetails', {
          goods_id: id,
          shop_id: wx.getStorageSync('shop_id') || ''
        })
        if (res.data.level == 'success') {
          let str = res.data.data;
          str.detail = str.detail.replace(/<img[^>]*>/gi, function (match, capture) {
            return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '')
          });
          str.detail = str.detail.replace(/\<img/gi, '<img style="max-width:100%;height:auto;vertical-align: top;" ');
          this.goodsDetail = str
          this.getQrCodeUrl()
        }
      },
      numberChange(num) {
        this.num = num
      },
      async addCart() {//添加到购物车
        const _this = this
        if (this.num <= 0) {
          this.$currency.showToast('购买数量不能为0');
          return
        } else if (this.classifyId == '') {
          this.$currency.showToast('先选择规格吧');
          return
        }
        var userToken = wx.getStorageSync('userToken')
        let res = await this.$request.postData('/goods/addShopCart', {
          goods_id: this.id,
          num: this.num,
          user_token: userToken,
          goods_spu_id: this.classifyId,
          shop_id: wx.getStorageSync('shop_id') || ''
        })
        wx.showLoading()
        if (res.data.level == 'success') {
          this.$currency.showToast('成功加入购物车', 'success', 1500);
          this.showModal = false;
          wx.hideLoading();
          this.getCartList()

        } else {
          wx.hideLoading({
            success: function () {
              _this.$currency.showToast(res.data.message, 'none', 1500)
            }
          });

        }
      },
      async getCartList() {
        let userToken = wx.getStorageSync('userToken');
        if (userToken) {
          let res = await this.$request.getData('/goods/getShopCart', {
            user_token: userToken,
            shop_id: wx.getStorageSync('shop_id') || ''
          });
          if (res.data.level == 'success') {
            this.cartListNum = res.data.data.length
          }
        }

      },
      async getComment() {
        let res = await this.$request.getData('/goods/getUserComment', {goods_id: this.id, limit: 5, page: 0})
        this.commentList = res.data
      },
      select_classify(item, index) {//选择规格
        this.classifyIndex = index
        this.classifyId = item.id
        this.$set(this.goodsDetail, 'stock', item.stock)
        this.$set(this.goodsDetail, 's_price', item.price)
      },
      toCart() {
        wx.switchTab({url: '/pages/cart/main'})
      },
      toGoodsIntroduce(value, tag) {
        wx.navigateTo({url: `/pages/goodsDetailIntroduce/main?index=${value}&&tag=${tag}&&id=${this.id}`})
      }
    },
    onShareAppMessage() {
      return {
        title: this.goodsDetail.name,
        desc: '波罗蛋在线商城',
        path: '/pages/goodsDetail/main?id='+this.id
      }
    },
    onShow() {
      const pages = getCurrentPages()
      const currPage = pages[pages.length - 1]
      console.log(currPage)
      if (currPage.data.type == 'back') {
        console.log(currPage)
      } else {
        this.num = 1;//清空选择商品的数量
        this.showModal = false//显示弹出层
        this.buyNow = false//显示加入购物车还是立即购买按钮
        this.classifyIndex = -1,//规格索引
          // this.classifyId=''//规格id
          this.$store.dispatch('setCoupon', '')//用来清空优惠券，只能这里清空
      }
      this.getGoodsDetails(this.id)
      this.getCartList()
    }

  }
</script>

<style scoped lang="scss">
  @import "../../common/css/mixin";

  .scrollForbidden {
    overflow: hidden; /*有弹出层时禁止下层滑动*/
  }

  /* 头部 */
  .goodsDetail {
    width: 100%;
    height: 100%;
    background: #eee;
  }

  .name_wrapper {
    padding: 10px;
    background: #fff;
  }

  .name_tag {
    border: 1px solid purple;
    color: purple;
    border-radius: 5px;
    padding: 2.5px;
    font-size: 12px;
    margin-right: 5px;
  }

  .name {
    font-size: 32rpx;
    font-weight: bold;
    line-height: 50rpx;
    min-height: 50rpx;
  }

  .price {
    margin-top: 10px;
    @include flex(flex-start);
    flex-direction: row;
  }

  .left span:nth-child(1) {
    color: red;
    font-size: 28rpx;
    margin-right: 10px;
  }

  .left span:nth-child(2) {
    text-decoration: line-through;
  }

  .right {
    margin-left: auto;
    font-size: 28rpx;
    color: #858585;
  }

  .service {
    background: #ffffff;
    margin-top: 1rpx;
    padding: 15px 10px;
    @include flex(flex-start);
    flex-direction: row;

    .service-item {
      margin-right: 30rpx;

      img {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
        vertical-align: middle;
      }

      span {
        font-size: 24rpx;
        color: #5c5c5c;
        line-height: 30rpx;
      }
    }
  }

  /* 中间详情 */
  .goods_desc {
    width: 100%;
    margin-top: 10px;
  }

  .goods_desc_item {
    background: #fff;
    display: flex;
    height: 40px;
    align-items: center;
    margin-bottom: 5px;
    color: #5c5c5c;
  }

  .goods_desc_item span:nth-child(1) {
    color: rgb(63, 60, 60);
    font-size: 12px;
    margin-left: 10px;
    margin-right: 20px;
  }

  .goods_desc_item img {
    width: 20px;
    height: 20px;
  }

  .list_item_arrow {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* 评论列 */
  .comment {
    width: 100%;
    background: #fff;
  }

  .comment_item {
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
    color: rgb(63, 60, 60);
    font-size: 14px;
  }

  .comment_item_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .comment_item_nick {
    color: cornflowerblue;
  }

  .comment_btn {
    margin-top: 10px;
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .comment_btn_all, .comment_btn_pic {
    width: 40%;
    height: 30px;
    line-height: 30px;
    padding: 2.5px 5px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid gray;
  }

  /* 商品介绍 */
  .goods_introduce {
    background: #fff;
    width: 100%;
    margin-top: 10px;
    padding-bottom: 50px;
  }

  .goods_introduce > div:nth-child(1) {
    margin-top: 5px;
    margin-left: 10px;
    line-height: 80rpx;
    height: 80rpx;
  }

  .goods_introduce > div:nth-child(2) {
    /*margin-top:5px;*/
    /*margin-left: 10px;*/
    /*!*color:red;*!*/
    /*margin-bottom:20px;*/
    padding: 20rpx;
  }

  .goods_introduce > img {
    width: 100%;
    height: auto;
    display: block;
  }


  /* 底部购物栏 */
  .cartBar {
    width: 100%;
    height: 45px;
    display: flex;
    position: fixed;
    bottom: 0;
    background: #fff;
  }

  .cartBar_left, .cartBar_right {
    flex: 1;
    display: flex;
  }

  .cartBar_left_item {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }

  .cartBar_left_item > img {
    width: 20px;
    height: 20px;
  }

  .cartBar_right {
    display: flex;
    line-height: 45px;
    text-align: center;
    color: #fff;
  }

  .cartBar_right > div {
    flex: 1;
  }

  .cartBar_right > div:nth-child(1) {
    background: orange;
  }

  .cartBar_right > div:nth-child(2) {
    background: red;
  }

  .cartIcon_wrapper {
    position: relative;
  }

  .cartIcon {
    position: absolute;
    background: red;
    right: 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    top: -5px;
  }


  /* 弹出框 */
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.7;
  }

  .modalDlg {
    width: 100%;
    height: 45%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
  }

  .modalDlg_top {
    padding: 5px;
    padding-right: 25px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;

  }

  .modalDlg_top > img {
    width: 80px;
    height: 80px;
  }

  .modalDlg_top_right {
    margin-left: 20px;
    width: 200px;
  }

  .modalDlg_top_right_name {
    display: flex;
    align-items: center
  }

  .modalDlg_top_right_name_tag {
    color: purple;
    display: inline-block;
    width: 50px;
    text-align: center;
    border: 1px solid purple;
    font-size: 10px;
    border-radius: 5px;
    margin-right: 5px;
  }

  .modalDlg_top_right_name_tag + span {
    width: 200px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .modalDlo_bottom {
    margin-left: 5px;
  }

  .cart_price {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center
  }

  .cart_price > span:nth-child(1) {
    color: red;
  }

  .modalDlo_center, .modalDlo_center_tit, .modalDlo_center_classify {
    width: 100%;
  }

  .modalDlo_center_classify {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0;
    padding-bottom: 20px;
  }

  .modalDlo_center_classify > div {
    border: 1px solid #eee;
    padding: 2.5px 5px;
    border-radius: 5px;
    margin-left: 5px;
    text-align: center;
  }

  .modalDlo_center_tit {
    padding-left: 10px;
  }

  .join_cart {
    width: 100%;
    background: rgb(196, 75, 75);
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    position: absolute;
    bottom: 0;
  }

  button::after {
    border: none;
  }

  button {
    background-color: #fff;
    line-height: 16px;
    font-size: 10px;
    border-radius: 0;
  }

  .comment_item_pic {
    display: flex;
  }

  .comment_item_pic > img {
    width: 80px;
    height: 80px;
    margin-right: 10px;
  }

  /* 规格 */
  .selectClassify {
    border: red 1px solid !important;
    color: red;
  }

  .share-btn{
    position: fixed;
    right: 10rpx;
    bottom: 20%;
    height: 90rpx;
    width: 90rpx;
    z-index: 1000;
    background-color: rgba(114, 114, 114, 0.6);
    border-radius: 50%;
    text-align: center;

    img{
      width: 60%;
      height: 60%;
    }
    .share-text{
      font-size: 12px;
      color: white;
      line-height: 20rpx;
    }
  }
  .share-mode{
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    min-height: 100vh;
    @include flex();
    flex-direction: column;
    background: rgba(0,0,0,0.6);
    .qrCode_wrapper{
      /*background: #ffffff;*/
      width: 85%;
      justify-content: center;
      border-radius: 5px;
    }
    .share-bottom{
      margin-top: auto;
      width: 100vw;
      background: #ffffff;
      border-radius: 10rpx 10rpx  0 0 ;
      .share-title{
        height: 100rpx;
        text-align: center;
        width: 100vw;
        line-height: 100rpx;
        font-size: 28rpx;
        border-bottom: 2rpx solid #ddd;
      }
      .share-list{
        @include flexWrap();
        flex-direction: row;
        width: calc(100vw - 40rpx);
        padding: 20rpx;
        .share-item{
          padding: 20rpx;
          width: calc((100vw - 120rpx)/2);
          @include flex();
          flex-direction: column;
          .item-img{
            width: 80rpx;
            height: 80rpx;
            border-radius: 360rpx;
            overflow: hidden;
          }
          .item-name{
            height: 40rpx;
            line-height: 40rpx;
            font-size: 24rpx;
          }
        }
      }
    }
  }
  .assemble_msg_btn{
    color:#fff;
    width: calc(100% - 80px);
    padding:10px 0;
    border-radius: 20px!important;
    margin:0 0 20px 40px;
    background-image: linear-gradient(to right,#ff6143,#ff1767);
  }
  .wx_btn{
    font-size: 15px;
  }
</style>
